<template>
  <div class="report-back">
    <div class="report-container">
      <div class="report-title" >
        <span>举报信息</span>
      </div>
      <div class="report-content">

        <div v-if="UserReport.length!==0">
          <div
              v-for="report in UserReport"
              :key="report"
              class="reportitem-container">
            <div class="reportitem-content">

              <div>
                <p class="clickText" @click="findTheReport(report.userNo)">{{report.userName}}</p> 举报了 <p class="clickText" @click="findTheObeject(report.reportObjectNo,report.reportObjectType)">{{report.reportObjectName}}</p> ({{report.reportObjectTypeName}}) 举报原因： {{report.relativeReason}}
              </div>

            </div>
            <div class="reportitem-time">
              <p>{{report.reportTime}}</p>
            </div>
            <div class="reportitem-reply">
              <p @click="replayReport(report)">回复</p>
            </div>
          </div>
        </div>
        <div v-else class="noData">
          暂无数据
        </div>

      </div>

      <confirmwindow
          id="reply"
          style="overflow: scroll"
          v-model="Replyvisibility"
          @bodyClose="ReplyReportbodyClose()"
          :bodyClosable="true"
          :width="600"
          :height="350">
        <div class="titleReport-container">
            <p>举报详情</p>
          </div>
        <div class="detailReport-container">

            <div class="detailReport">举报人：{{UserReport_temp.userName}}</div>
            <div class="detailReport" style="padding: 0">被举报：{{UserReport_temp.reportObjectName}}</div>
          </div>
        <div class="detailReport-container">

            <div class="detailReport">举报类型：{{UserReport_temp.reportObjectTypeName}}</div>
            <div class="detailReport" style="padding: 0" >举报时间：{{UserReport_temp.reportTime}}</div>

          </div>
        <div class="detailReport-container" style="margin-bottom: 20px">

            <div class="detailReport" >举报原因：{{UserReport_temp.reportReason}}</div>
          </div>
        <div class="writeReport-container">
            <div style="display: inline-block;position: absolute;left: 40px">回复:</div>

            <div class="writeReport">
              <textarea :disabled="hasReply==='已回复'" v-model="UserReport_temp.reportRejection"></textarea>
            </div>
            <div class="replyReport-button-container">
              <button :disabled="hasReply==='已回复'"  :class="[hasReply==='已回复'?'hasReplyed':'Rreply']" @click="replyTheReport">{{hasReply}}</button>
              <button class="Rcancel" @click="ReplyReportbodyClose()">取消</button>
            </div>

          </div>
      </confirmwindow>
    </div>
  </div>
</template>

<script>
import Confirmwindow from "@/components/common/pop/cmModal";
export default {
  name: "reportReply",
  components:{Confirmwindow},
  data(){
    return{
      Replyvisibility:false,
      UserReport_temp:{

      },
      UserReport:{

      },
      hasReply:"回复"
    }
  },
  methods:{
    findTheObeject(objectNo){


      let routeData=this.$router.resolve({path:'browsetopic',query:{postNo:objectNo}})
      window.open(routeData.href, '_blank');

    },
    findTheReport(userNo){

      let routeData=this.$router.resolve({path:'usercenter',query:{userNo:userNo,choice:1}})
      window.open(routeData.href, '_blank');


    },
    replyTheReport(){
      this.$getApi.replyReport(this.UserReport_temp.reportNo,this.UserReport_temp.reportRejection)
      this.Replyvisibility=!this.Replyvisibility
    },
    replayReport(report){
      this.Replyvisibility=!this.Replyvisibility
      this.UserReport_temp=report
      if(report.reportRejection===null){
        this.hasReply="回复"
      }else {
        this.hasReply="已回复"
      }
    },
    ReplyReportbodyClose(){
      this.Replyvisibility=!this.Replyvisibility

    }
  },
  created() {
    this.UserReport=this.$store.getters.communityReport.data.reports



  }
}
</script>

<style scoped>
.noData{
  height: 100%;
  background-color: rgb(248,248,248);
  font-size: 30px;
  padding:225px 340px;
  color: #999999;
}
.report-content{

  height: 600px;

}
.replyReport-button-container{
  position: relative;
  left: 2%;
  top: -8%;

  display: inline;
}
.Rreply{
  font-size: 14px;
  color: #fff;
  background-color: #06f;
  cursor: pointer;
  /*padding: 0 16px;*/
  line-height: 32px;
  border: 1px solid ;
  border-radius: 3px;
  outline: none;
  margin-right: 10px;

}
.hasReplyed{
  font-size: 14px;
  color: #fff;
  background-color: #06f;
  cursor: not-allowed;
  /*padding: 0 16px;*/
  line-height: 32px;
  border: 1px solid ;
  border-radius: 3px;
  outline: none;
  margin-right: 10px;
  opacity: 0.6;
}
.Rcancel:hover{
  opacity: 0.7;
}
 .Rcancel{
  font-size: 14px;
  color: #000000;
  background-color: #fff;
  cursor: pointer;
  padding: 0 16px;
  line-height: 32px;
  border: 1px solid;
  border-radius: 3px;
  outline: none;
  margin-right: 10px;

}
.Rreply:hover{
  opacity: 0.7;
}
.titleReport-container{
  height: 20%;
  text-align: center;
}
.titleReport-container p{
  font-size: 18px;
  margin: 0;
  padding: 15px 11px;
}
.detailReport-container{
  height: 15%;
  display: table;
  width: 100%;

}
.writeReport-container{
  height: 30%;
  display: table;
  width: 100%;

}
.detailReport{
  font-size: 16px;
  display: table-cell;
  vertical-align: middle;
  padding: 0px 40px;
  width: 50%;
}
.writeReport{

  display: table-cell;
  vertical-align: middle;
  display: inline;

}
.writeReport textarea{
  resize: none;
  border: #ebebeb 1px solid;
  height: 60%;
  width: 320px;
  margin-left: 90px;
  margin-right: 15px;
  margin-bottom: 15px;

}
.writeReport textarea:focus{
  outline: none;
  border: #ebebeb 1px solid;
}

.reportitem-container{
  background-color: #ffffff;
  font-size: 15px;
  width: 90%;
  display: flex;
  border-bottom: 1px solid  rgb(240, 240, 240);
  position: relative;
  left: 5%;

}
.reportitem-container div{

}
.reportitem-content div{
  padding-top: 15px;
  padding-left: 20px;
  padding-right: 20px;
  max-height: 40px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

}
.reportitem-content div p {
  cursor: pointer;
}
.reportitem-content{
  width: 65%;
}
.reportitem-time{
  width: 25%;
}
.reportitem-reply{
  width: 10%;
  display: table;

}
.reportitem-reply p{
  color:  #06f;
}
.reportitem-reply p:hover{
  opacity: 0.7;
}
.reportitem-reply p{
  text-align: center;
  display: table-cell;
  vertical-align: middle;
  cursor: pointer;
}
.report-back {
  width: 100%;
  height: 100%;

}
.report-container{

}
.report-title{
  font-size: 20px;
  border-bottom: 1px solid rgb(240,240,240);
  padding: 15px;
}
.report-title span{
  padding:5px 11px;
  border-left:5px rgb(255, 80, 80) solid;
}
.clickText{
  display: inline-block;
  margin: 0;
  color: rgb(4, 143, 250);
}
</style>
